<template>
  <div :ref="chartId" style="width: 100%;height:400px;"></div>  
</template>
<script>
import echarts from 'echarts'
import  _ from 'lodash'
export default {
  props:{
    chartId: {
      type:String,
      default: 'myLine'
    },
    width: String,
    height: String,
    titleText: String,
    legendData: Array,  //name需要和series里的data一致，才会显示
    xData: Array,
    seriesData: {
      type: Array,
      default: () => {
        return [
          {
            name: '老司机',
            data: [],
            borderColor: '#FF6F02',
            colorStops:['rgba(255, 192, 0, 0.9)','rgba(255, 111, 2, 0.1)'],
          },
          {
            name: '新司机',
            data: [],
            borderColor: '#3ED596',
            colorStops:['rgba(175, 255, 44, 0.9)','rgba(175, 255, 44, 0.1)']
          }
        ]
      }
    }
  },
  data(){
    return{
      title: {
        text: '每日活动人数'
      },
      tooltip: {
        trigger: 'axis'
      },
      legend:{
        data:['老司机','新司机'],
        icon: 'rect',
        bottom: 0,
        left: 'center',
        textStyle:{
          color: '#222222'
        }
      },
      xAxis: {
        type: 'category',
        data: [],
        axisLabel:{
          showMinLabel: true,
          showMaxLabel: true
        }  
      },
      yAxis: {
        type: 'value',
        axisLine: {show:false},
        axisTick: {show:false},
      }
    }
  },
  watch: {
    xData: {
      handler() {
        this.initData()
      },
      immediate: false,
    },
  },
  methods:{
    initData(){
      this.title.text = this.titleText
      this.legend.data = this.legendData
      this.xAxis.data = this.xData
      const series = this.transformSeries(this.seriesData)
      this.initChart(series)
    },
    initChart(series){
      let myChart = echarts.init(this.$refs[this.chartId])
      const {title,tooltip,legend,xAxis,yAxis} = this
      const option = {
        title,
        tooltip,
        legend,
        xAxis,
        yAxis,
        series
      }
      myChart.setOption(option)
    },
    transformSeries(seriesData){
      let tempSeries = []
      const config = {
        type: 'line',
        smooth: true,
        areaStyle: {},
        symbol: 'circle',
      }
      let itemStyleConfig = {
        borderColor: '#FF6F02',
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
            offset: 0, color: 'rgba(255, 192, 0, 0.9)' // 0% 处的颜色
          }, {
            offset: 1, color: 'rgba(255, 111, 2, 0.1)' // 100% 处的颜色
          }],
          global: false // 缺省为 false
        }
      }
      let lineStyleConfig = {
        color: '#FF6F02'
      }
      tempSeries = seriesData.map( item => {
        const {name,data,borderColor,colorStops,markArea} = item
        let itemStyle = _.cloneDeep(itemStyleConfig)
        let lineStyle = _.cloneDeep(lineStyleConfig)
        itemStyle.borderColor = borderColor
        itemStyle.color.colorStops[0].color = colorStops[0]
        itemStyle.color.colorStops[1].color = colorStops[1]
        lineStyle.color = borderColor
        lineStyle.width = 2.5
        return  {...config,name,data,itemStyle,markArea,lineStyle}
      })
      return tempSeries
    }
  }
}
</script>
